<template>
        <tr style="padding: 10px;">
            <td colspan="4">
                <div style="overflow: hidden; width: 100%" v-if="detailform.isstartend == 1">
                    <el-form ref="yjform" :model="yjform" :inline="true" size="mini" label-width="100px"
                        style="text-align: left">
                        <el-form-item label="文件类型:" prop="yjlx">
                            <div style="width: 160px">
                                <el-cascader :options="yjlxlist" :show-all-levels="false" v-model="yjlx"
                                    placeholder="请选择文件类型" :props="{ checkStrictly: true }" clearable></el-cascader>
                            </div>
                        </el-form-item>
                        <el-form-item label="文件名称:" prop="yjbz">
                            <div style="width: 160px">
                                <el-input placeholder="请输入文件名称" v-model="yjform.yjbz" style="width: 100%"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="是否需要盖章:" prop="sfgz">
                            <div style="width: 160px">
                                <el-select v-model="yjform.sfgz" placeholder="请选择是否需要盖章" style="width: 100%" clearable>
                                    <el-option v-for="item in sflist" :key="item.code" :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="盖章类型:" prop="gzlx">
                            <div style="width: 160px">
                                <el-select v-model="yjform.gzlx" placeholder="请选择盖章类型" style="width: 100%" clearable>
                                    <el-option v-for="item in gzlxlist" :key="item.code" :label="item.name"
                                        :value="item.code">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitnopic">新增</el-button>
                        </el-form-item>
                        <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                            :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                            :file-list="filefileList">
                            <div class="unloadTitle">附件</div>
                            <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                        </el-upload>
                    </el-form>
                    <div style="margin: auto">
                        <el-button type="primary" @click="submitForm" v-if="fileLists.length != 0">上传</el-button>
                    </div>
                </div>
                <div id="sortableDiv">
                    <el-table :data="yjtableData" style="width: 100%; margin-top: 10px" border ref="pxtable"
                        row-key="no">
                        <el-table-column prop="yjbz" label="文件名称" align="center"> </el-table-column>
                        <el-table-column prop="yjlx" label="文件类型" align="center" width="80">
                        </el-table-column>
                        <el-table-column prop="wjmc" label="文件预览" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.fj">
                                    <router-link target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj, type: scope.row.suffix } }"
                                        style="color: #008a94" v-if="scope.row.suffix == '.docx' ||
                    scope.row.suffix == '.doc' ||
                    scope.row.suffix == '.xls' ||
                    scope.row.suffix == '.xlsx'
                    ">{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button type="text" size="small"
                                        @click="redownload(scope.row.fj, scope.row.wjmc, scope.row.suffix)" v-else>{{
                    scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i></el-button>
                                </div>
                                <span v-else>{{ scope.row.wjmc }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wjmc" label="文件下载" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"
                                    @click="downloadfile(scope.row.fj, scope.row.wjmc, scope.row.suffix)"
                                    style="color: blue; text-decoration: underline" v-if="scope.row.fj">{{
                    scope.row.wjmc }}</el-button>
                                <span v-else>{{ scope.row.wjmc }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column>
                        <el-table-column prop="gzlx" label="盖章类型" align="center"> </el-table-column>
                        <el-table-column label="操作" width="100" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"
                                    @click.native.prevent="deleteRow(scope.$index, yjtableData)"
                                    :style="{ color: detailform.isstartend != 1 ? '#c0c4cc' : 'red' }"
                                    :disabled="detailform.isstartend != 1">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </td>
        </tr>
</template>
<script>
import { download, redownload } from '@/api/index';
import fileType from './vo/filetype';
import valueList from '@/components/common/valueList.vue';
import global from '@/components/common/httpurl.vue';
import Sortable from 'sortablejs'
export default {
    props: [
        'yjtableData',
        'detailform'
    ],
    data() {
        return {
            yjlx: [],
            isSubmit: false,
            radio: 0,
            activeName: 'first',
            options: [], //测试
            yjlxlist: valueList.yjlxlist, //是否列表
            yjdeepcolor: null,
            yjshow: false, //文件弹框
            yjform: {
                yjbz: null,
                yjlx: null,
                gzlx: null,
                sfgz: null
            }, //文件表单
            jgxslist: valueList.jgxslist,
            qslist: valueList.qslist,
            fwytlist: valueList.fwytlist,
            cblist: valueList.cblist,
            cqdwlist: valueList.cqdwlist,
            sflist: valueList.sflist, //是否列表
            gzlxlist: valueList.gzlxlist, //盖章类型
            myHeaders: {
                token: localStorage.getItem('token')
            },
            filefileList: [],
            filefileLists: [],
            httpUrl: global.httpUrl, //公共地址
            form: {
                clyj: '', //处理意见
                id: '',
                nextnodeid: '', //选择下一步节点id
                selectuser: '', //下一步选择用户id
                zt: 1 //通过驳回 0：驳回 1：通过
            },
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            tableData: [],
            yjhttableData: [],
            filetable: [], //文件列表
            xcnr: [],
            role: this.$store.getters.role,
            fileLists: [], //文件列表
            filehtLists: [],
            czlist: [], //操作列表
            sflists: [
                { name: '是', value: '1' },
                { name: '否', value: '0' }
            ], //是否
            fileform: {
                caseid: '',
                pageSize: 100,
                current: 1
            },

            gdform: {
                id: ''
            },
            htlxlist: valueList.htlxlist,
            szqklist: valueList.szqklist
        };
    },
    methods: {
        // 引入import Sortable from 'sortablejs'
        // 建立获取#sortableDiv <div id="sortableDiv">包裹table
        // table多传两个参数ref="pxtable" row-key="no" no作为唯一值使用
        // 拖拽功能（每次进入的时候 yjtableData先遍历获取新增一个按照index排序no的字段，然后每次新增文件的时候重新遍历赋值）
        rowDrop() {
            const tableref = this.$refs.pxtable.$el
            const tbody = tableref.querySelector('#sortableDiv .el-table .el-table__body-wrapper .el-table__body tbody')
            const _this = this
            //这个就是拖拽组件库的使用
            Sortable.create(tbody, {
                onEnd: (evt) => {
                    console.log(evt, '拖拽11')
                    const changedata = _this.yjtableData.splice(evt.oldIndex || 0, 1)
                    _this.yjtableData.splice(evt.newIndex || 0, 0, changedata[0])
                    console.log(_this.yjtableData, '拖拽表格')
                    this.$emit("submit-Form", this.yjtableData);
                }
            })
        },
        // 上传功能
        submitForm() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1];
                this.yjform.yjlx = lastItem;
                // this.yjform.yjlx = this.yjform.yjlx.pop();
            } else {
                this.$message.error('请选择文件类型');
                return;
            }
            console.log('yjlx', this.yjform.yjlx);
            console.log('yjbz', this.yjform.yjbz);
            console.log('fileLists', this.fileLists);
            // 类型 suffix
            let yjlb = this.fileLists.map((res) => {
                return {
                    caseid: '', // 流程实例id ,
                    create_name: '', //创建人 ,
                    create_name_id: '', //创建人id ,
                    create_time: '', //创建时间 ,
                    fj: res.response.data.id, //附件
                    id: '', // id ,
                    status_code: '1', // 1正常 2删除 ,
                    update_name: '', // 修改人 ,
                    update_name_id: '', //修改人id ,
                    update_time: '', //修改时间 ,
                    suffix: res.response.data.suffix, //文件类型 ,
                    wjmc: res.response.data.filename, //文件名称 ,
                    yjbz: this.yjform.yjbz, //文件名称 ,
                    yjlx: this.yjform.yjlx, //文件类型
                    sfgz: this.yjform.sfgz, //是否需要盖章
                    gzlx: this.yjform.gzlx //盖章类型
                };
            });
            console.log('yjlb', yjlb);
            this.yjtableData = this.yjtableData.concat(yjlb);
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjform.gzlx = null;
            this.yjlx = null;
            // 遍历重新赋值
            this.yjtableData.forEach((item, index) => {
                item.no = index
            })
            this.filefileList = [];
            this.fileLists = [];
            this.rowDrop()
            this.$emit("submit-Form", this.yjtableData);
        },
        // 上传功能（不包含文件）
        submitnopic() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1];
                this.yjform.yjlx = lastItem;
            } else {
                this.$message.error('请选择文件类型');
                return;
            }
            let yjlb = [
                {
                    caseid: '', // 流程实例id ,
                    create_name: '', //创建人 ,
                    create_name_id: '', //创建人id ,
                    create_time: '', //创建时间 ,
                    fj: '', //附件
                    id: '', // id ,
                    status_code: '1', // 1正常 2删除 ,
                    update_name: '', // 修改人 ,
                    update_name_id: '', //修改人id ,
                    update_time: '', //修改时间 ,
                    wjmc: this.yjform.yjbz, //文件名称 ,
                    yjbz: this.yjform.yjbz, //文件名称 ,
                    yjlx: this.yjform.yjlx, //文件类型
                    sfgz: this.yjform.sfgz, //是否需要盖章
                    gzlx: this.yjform.gzlx, //盖章类型
                    suffix: '' //附件
                }
            ];
            this.yjtableData = this.yjtableData.concat(yjlb);
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjform.gzlx = null;
            this.yjlx = null;
            // 遍历重新赋值
            this.yjtableData.forEach((item, index) => {
                item.no = index
            })
            this.rowDrop()
            this.$emit("submit-Form", this.yjtableData);
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank');
            });
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList);
            this.fileLists = fileList;
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file);
            console.log(fileList);
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists);
            this.fileLists = fileLists;
            this.$message.success('导入成功');
        },
        // 删除合同
        handlehtRemoves(file, fileList) {
            console.log(fileList);
            this.filehtLists = fileList;
        },
        // 上传合同清单成功
        handelhtfilesuccess(response, file, fileLists) {
            console.log(fileLists);
            this.filehtLists = fileLists;
            this.$message.success('导入成功');
            // 类型 suffix
            let yjlb = this.filehtLists.map((res) => {
                return {
                    id: res.response.data.id, //附件
                    suffix: res.response.data.suffix, //文件类型 ,
                    name: res.response.data.filename //文件名称 ,
                };
            });
            console.log('yjlb', yjlb);
            this.yjhttableData = this.yjhttableData.concat(yjlb);
            this.filefileLists = [];
            this.filehtLists = [];
        },
        // 删除
        deleteRow(index, rows) {
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    rows.splice(index, 1);
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
    }
}
</script>
<style>
.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    /* border: 1px solid #c0c0c0; */
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>